<template>
  <div class="my navBar">
    <van-nav-bar title="我的" />
    <van-cell-group class="myl">
      <van-cell class="my_lgm" @click="mybtn">
       
        <!-- 左侧图片 -->
        <template #icon>
          <van-image round width="55" height="55" :src="require('assets/images/touxiang.png')" />
        </template>
        <!-- 左侧标题 -->
        <template>
          <div class="cell_title">
            <B class="dataList_title van-ellipsis">用户名</B>
          </div>
        </template>
        <!-- 标题下方描述 -->
        <template>
          <p class="dataList_label">{{userName}}</p>
        </template>
        <!-- 右侧图标 -->
        <template #right-icon>
          <van-image width="6.5" height="13" fit="contain" :src="require('assets/images/RightArrow.png')" />
        </template>
      </van-cell>
      <van-progress :show-pivot="false" :percentage="percentage" stroke-width="5" class="progress" />
      <div class="flex">
        <span>容量</span>
        <div class="flex_right">
          <span>{{capacity | filterType}}GB</span>
          / {{allCapacity}}GB
        </div>
      </div>

    </van-cell-group>
    <div class="setup">
      <!-- <van-checkbox-group v-model="fatherCheckArr" ref="listCheck"> -->

      <!-- <div class="setup_hig"  @click="showPopup">
        <div class="setup_color">消息中心</div>
        <van-image width="6.5" height="13"   fit="contain" :src="require('assets/images/RightArrow.png')" />
      </div> -->
      
      <div class="setup_hig" @click="about">
        <!-- 左侧标题 -->
        <div class="setup_color">关于</div>
        <!-- 右侧图标 -->
        <van-image width="6.5" height="13"   fit="contain" :src="require('assets/images/RightArrow.png')" />
      </div>
  
      <!-- </van-checkbox-group> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "my",
  data() {
    return {
      // 通用变量
      // 顶部标题
      topTitle: "我的",

       show: false,
    };
  },
  methods: {
    showPopup() {
      
    },
    //用户详情
    mybtn() {
      this.$router.push({path: '/MyDetails'})
    },
    //进入关于页面
    about() {
      this.$router.push({path: '/about'})
    }
  },
  computed: {
    userName(){
      return window.sessionStorage.getItem('shareUserName')
    },
    allCapacity(){
      return sessionStorage.getItem('allCapacity')
    },
    capacity(){
      return sessionStorage.getItem('capacity')
    },
    percentage(){
      return (this.capacity / this.allCapacity * 100).toFixed(2)
    }
  },
  filters: {
    filterType: function(use) {
      // if (val === "0" || val === "") return " 0 KB";
      // let k = 1024;
      // var sizes = ["B","KB", "MB", "GB", "TB"],
      //   i = Math.floor(Math.log(val) / Math.log(k));
      // console.log(use)
      if (use <= 0.1){
        use = 0.1;
      }else{
        // use = (parseInt(use) * 10) / 10;
        use = Number(use).toFixed(2)
      }
      // console.log(use)
      return use;
    }
  }
};
</script>

<style lang="less" scoped>
.myl {
  // background-color: #f8f8f8;
  padding-bottom: 8px;

  .my_lgm {
    padding: 25px 0px;
    align-items: center;
  }
}
.setup {
  align-items: center;

  .setup_hig {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;

    .setup_color{
      font-size: 14px;
      color: #2a2b2d;;
    }
  }
}
.navBar /deep/ .van-nav-bar {
  height: 44px;
}
.navBar /deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #2a2b2d;
  font-weight: 600;
}
.navBar /deep/ .van-search {
  padding: 10px 15px;
}
.dataList_label {
  padding-top: 0px;
  padding-left: 10px;
  color: #a5aeb7;
  font-size: 14px;
}
.cell_title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
  .dataList_title {
    color: #2a2b2d;
    font-size: 18px;
    display: inline-block;
    margin-right: 20px;
    max-width: 180px;
    font-weight:550
  }
  .isCollection {
    margin-right: 10px;
  }
  .cell_tag {
    transform-origin: left;
    transform: scale(0.75);
  }
}

.progress{
  margin-bottom: 5px;
}
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #a5aeb7;
  .flex_right{
    span{
      color: #0099ff;
    }
  }
}
</style>